<template>
  <div class="article-manager">
    <div class="i-layout-page-header">
      <i-page-header title="广告分类"></i-page-header>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form ref="artFrom" :model="artFrom">
        <Row type="flex" :gutter="24">
          <Col v-bind="grid">
            <FormItem label="广告分类：" prop="pid" label-for="pid">
              <Select v-model="artFrom.pid" @on-change="userSearchs" clearable>
                <Option
                  v-for="item in treeSelect"
                  :value="item.id"
                  :key="item.id"
                  >{{ item.html + item.cate_name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="状态：" label-for="is_show">
              <Select
                v-model="artFrom.is_show"
                placeholder="请选择"
                clearable
                @on-change="userSearchs"
              >
                <Option value="1">显示</Option>
                <Option value="0">隐藏</Option>
              </Select>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="广告分类：" label-for="status2">
              <Input
                search
                enter-button
                placeholder="请输入"
                v-model="artFrom.cate_name"
                @on-search="userSearchs"
              />
            </FormItem>
          </Col>
        </Row>
        <Row type="flex">
          <Col v-bind="grid">
            <Button type="primary" class="bnt" icon="md-add" @click="tapAdd"
              >添加广告分类</Button
            >
          </Col>
        </Row>
      </Form>
      <vxe-table
        class="mt25"
        highlight-hover-row
        :loading="loading"
        header-row-class-name="false"
        :tree-config="{ children: 'children', expandAll: true }"
        :data="tableData"
      >
        <vxe-table-column
          field="id"
          title="ID"
          tooltip
          width="80"
        ></vxe-table-column>
        <vxe-table-column
          field="cate_name"
          tree-node
          title="分类名称"
          min-width="250"
        ></vxe-table-column>
        <vxe-table-column field="pic" title="显示个数" min-width="100">
          <template v-slot="{ row }">
            <div v-if="row.max_count == 0">无限</div>
            <div v-else>{{ row.max_count }}</div>
          </template>
        </vxe-table-column>

        <vxe-table-column field="is_show" title="状态" min-width="120">
          <template v-slot="{ row }">
            <div v-if="row.type == 1">图文</div>
            <div v-if="row.type == 2">文字</div>
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="sort"
          title="排序"
          min-width="100"
          tooltip="true"
        ></vxe-table-column>
        <vxe-table-column
          field="date"
          title="操作"
          width="250"
          fixed="right"
          align="center"
        >
          <template v-slot="{ row, index }">
            <a @click="tapEdit(row.id)">编辑</a>
            <Divider type="vertical" />
            <a @click="del(row, '删除商品分类', index)">删除</a>
          </template>
        </vxe-table-column>
      </vxe-table>
    </Card>

    <Modal v-model="dialogVisible" :title="title" @on-cancel="editClose">
      <el-form ref="menu" :model="menu" label-width="80px">
        <el-form-item
          label="分类名称"
          prop="cate_name"
          :rules="[{ required: true, message: '请输入分类名称' }]"
        >
          <el-input
            placeholder="请输入分类名称"
            autocomplete="off"
            v-model="menu.cate_name"
          ></el-input>
        </el-form-item>

        <el-form-item label="归属分类">
          <el-select
            v-model="menu.pid"
            placeholder="归属分类"
            style="width: 100%"
          >
            <el-option
              :label="item.html + item.cate_name"
              :value="item.id"
              :key="item.id"
              v-for="item in treeSelect"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="广告类型">
          <el-select
            v-model="menu.type"
            placeholder="广告类型"
            style="width: 100%"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              :key="item.id"
              v-for="item in adverType"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="自定义">
          <el-table
            :data="menu.jsonAr"
            tooltip-effect="dark"
            header-cell-class-name="table-header"
          >
            <el-table-column prop="name" label="属性名" width="100">
            </el-table-column>

            <el-table-column prop="type" label="类型" width="100">
              <template slot-scope="scope">
                <div>{{ getJsonName(scope.row.type) }}</div>
              </template>
            </el-table-column>

            <el-table-column prop="code" label="code" width="100">
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <a @click="tapJsonEdit(scope.$index)">编辑</a>
                <Divider type="vertical" />
                <a @click="tapJsonDel(scope.$index)">删除</a>
              </template>
            </el-table-column>
          </el-table>

          <Button
            style="margin-top: 10px"
            @click="tapAddJson"
            type="primary"
            size="small"
            >添加自定义</Button
          >
        </el-form-item>

        <el-form-item label="广告数">
          <el-input placeholder="广告位数" v-model="menu.max_count"></el-input>
          <div>默认0，0无限广告显示</div>
        </el-form-item>

        <el-form-item label="栏目说明">
          <el-input
            type="textarea"
            placeholder="栏目说明"
            v-model="menu.mono"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subAdmin">确 定</el-button>
      </span>
    </Modal>

    <Modal
      v-model="dialogVisible2"
      title="自定义操作"
      :modal="false"
      @on-cancel="editClose2"
    >
      <el-form ref="json" :model="json" label-width="120px">
        <el-form-item
          label="属性名"
          prop="name"
          :rules="[{ required: true, message: '请输入属性名' }]"
        >
          <el-input
            placeholder="请输入属性名"
            autocomplete="off"
            v-model="json.name"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="code"
          prop="code"
          :rules="[{ required: true, message: '请输入属性CODE' }]"
        >
          <el-input
            placeholder="请输入属性CODE"
            autocomplete="off"
            v-model="json.code"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="属性类型"
          style="width: 250px"
          prop="type"
          :rules="[{ required: true, message: '请选择属性类型' }]"
        >
          <el-select v-model="json.type" placeholder="属性类型">
            <el-option
              :label="item.name"
              :value="item.value"
              :key="item.value"
              v-for="item in adverJsonType"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="subJson">确 定</el-button>
      </span>
    </Modal>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import IPageHeader from '../../../layouts/system/page-header/index'
import Setting from '../../../setting'
import UiUpload from '../../../ui/upload/index'
import {
  SystemAdverPageDel,
  SystemAdverPageInfo,
  SystemAdverPage,
  SystemAdverPageTree,
  SystemAdverPageUpdate,
} from '../../../api/system/adver'
export default {
  name: 'page',
  components: {
    UiUpload,
    IPageHeader,
  },
  data() {
    return {
      title: '添加广告分类',
      treeSelect: [],
      FromData: null,
      dialogVisible: false,
      dialogVisible2: false,
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      adverType: [
        { name: '图片模式', id: 1 },
        { name: '文字模式', id: 2 },
      ],
      adverJsonType: [
        { name: '文本类型', value: 'text' },
        { name: '图片类型', value: 'img' },
        { name: '链接类型', value: 'url' },
        { name: '产品ID', value: 'id' },
      ],
      loading: false,
      artFrom: {
        pid: 0,
        is_show: '',
        page: 1,
        cate_name: '',
      },
      tableData: [],
      menu: {
        id: 0,
        cate_name: '',
        type: 1,
        pid: '0',
        max_count: 0,
        mono: '',
        jsonAr: [],
      },
      menuJsonIndex: -1,
      json: {
        name: '',
        code: '',
        type: '',
      },
    }
  },
  created() {},
  mounted() {
    this.goodsCategory()
    this.getList()
  },
  methods: {
    // 商品分类；
    goodsCategory() {
      SystemAdverPageTree()
        .then((res) => {
          this.treeSelect = [
            { cate_name: '请选择分类', html: '', id: 0 },
          ].concat(res.data)
        })
        .catch((res) => {
          this.$Message.error(res.msg)
        })
    },
    // 列表
    getList() {
      this.loading = true
      this.artFrom.is_show = this.artFrom.is_show || ''
      this.artFrom.pid = this.artFrom.pid || ''
      SystemAdverPage(this.artFrom)
        .then((res) => {
          let data = res.data
          this.tableData = data
          this.loading = false
        })
        .catch((err) => {
          this.loading = false
          this.$Message.error(res.msg)
        })
    },
    /**
     * 添加新管理人员
     */
    tapAdd: function () {
      this.dialogVisible = true
      this.$refs['menu'].resetFields()
      this.menu = this.$utils.resetFields(this.menu, { type: 1, jsonAr: [] })
    },
    /**
     * 添加自定义分类
     */
    tapAddJson: function () {
      this.dialogVisible2 = true
      this.$refs['json'].resetFields()
      this.json = this.$utils.resetFields(this.json)
    },
    /**
     * 删除自定义分类
     */
    tapJsonDel: function (index) {
      this.menu.jsonAr.splice(index, 1)
    },
    /**
     * 修改自定义分类
     */
    tapJsonEdit: function (index) {
      this.menuJsonIndex = index
      this.json = this.menu.jsonAr[index]
      this.dialogVisible2 = true
    },

    /**
     * 关闭
     */
    editClose: function () {
      this.dialogVisible = false
    },
    /**
     * 关闭弹出层
     */
    editClose2: function () {
      this.dialogVisible2 = false
    },
    /**
     * 自定义分类
     */
    subJson: function () {
      this.$refs['json'].validate((valid) => {
        if (valid) {
          if (this.menuJsonIndex >= 0) {
            this.menu.jsonAr[this.menuJsonIndex] = JSON.parse(
              JSON.stringify(this.json)
            )
          } else {
            this.menu.jsonAr.push(JSON.parse(JSON.stringify(this.json)))
          }
          this.dialogVisible2 = false
        }
      })
    },
    /**
     * 修改数据
     */
    subAdmin: function () {
      this.$refs['menu'].validate((valid) => {
        if (valid) {
          let loading = this.$loading('提交数据中...')
          var data = {}
          for (var i in this.menu) {
            if (typeof this.menu[i] == 'object') {
              data['json'] = JSON.stringify(this.menu[i])
            } else {
              data[i] = this.menu[i]
            }
          }
          SystemAdverPageUpdate(data)
            .then((res) => {
              loading.close()
              if (res.code == 200) {
                this.dialogVisible = false
                this.$Message.success('操作成功')
                this.getList()
                this.goodsCategory()
              } else {
                this.$alert(res.msg, '系统提示')
              }
            })
            .catch((err) => {
              loading.close()
              this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
            })
        }
      })
    },
    // 删除
    del(row, tit, num) {
      this.$confirm('此操作将永久删除该栏目分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$utils.loading(this, '删除数据中...')
        SystemAdverPageDel({ id: row.id })
          .then((res) => {
            this.$utils.loadingClose()
            this.loading = true
            if (res.code == 200) {
              this.getList()
              this.goodsCategory()
            } else {
              this.$alert(res.msg)
            }
          })
          .catch((err) => {
            this.$utils.loadingClose()
            this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
          })
      })
    },
    /**
     * 修改分类
     */
    tapEdit: function (id) {
      this.$utils.loading(this, '获取数据中...')
      SystemAdverPageInfo({ id: id })
        .then((res) => {
          this.$utils.loadingClose()
          if (res.code == 200) {
            this.menu = res.data
            this.menu.jsonAr =
              res.data.json == '' ? [] : JSON.parse(res.data.json)
            this.dialogVisible = true
            this.title = '修改广告分类'
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    // 表格搜索
    userSearchs() {
      this.artFrom.page = 1
      this.getList()
    },

    getJsonName: function (type) {
      for (var i in this.adverJsonType) {
        if (type == this.adverJsonType[i].value) {
          return this.adverJsonType[i].name
        }
      }
    },
  },
}
</script>
<style scoped lang="stylus">
.treeSel >>>.ivu-select-dropdown-list
  padding 0 10px!important
  box-sizing border-box
.tabBox_img
  width 36px
  height 36px
  border-radius:4px
  cursor pointer
  img
    width 100%
    height 100%
</style>
